<template style="position: relative">
  <div style="overflow: hidden">
    <div id="container"></div>
    <div style="position: fixed; top: 0.1rem; width: 100%">
      <!-- <el-button

      type="primary"
    style="font-size: 1rem;width: 5rem; height: 2rem;"
      plain
      @click="ismaptraffic=!ismaptraffic">交通路况
    </el-button> -->
      <div style="width: 100%">
        <input
          type="text"
          placeholder="地方名字"
          v-model="searchplace"
          id="tipinput"
          @keydown.enter="searchNear"
          class="int1"
        />
        <!-- <van-button plain type="primary" class="btn2" @click="searchNear">附近</van-button>
<van-button plain type="success" class="btn2" @click="startdaohang">导航</van-button> -->
        <button class="btn2" @click="searchNear">附近</button>
        <button class="btn3" @click="startdaohang">导航</button>
        <div style="overflow: hidden">
       <button
        style="
          width: 30%;
          height: 2rem;
          border: none;
          color: white;
          border-radius: 5rem;
          font-size: 17px;
          background: orange;
        "
        @click="ssdaohang"
      >
        驾车导航
      </button>
      <button
        style="
          width: 30%;
          height: 2rem;
          border: none;
          color: white;
          margin-top: 1rem;
          border-radius: 5rem;
          font-size: 17px;
          background: orange;
        "
        @click="busdaohang"
      >
        公交导航
      </button>
      <button
        style="
          width: 30%;
          height: 2rem;
          border: none;
          color: white;
          margin-top: 1rem;
          border-radius: 1rem;
          font-size: 17px;
          background: orange;
        "
        @click="buxingdaohang"
      >
        步行导航
      </button>
     </div>
      </div>
     
      <!--查询列表,高德地图api绑定id-->
      <!-- <div id="panel"></div> -->
      <div id="jiache"></div>
      <div id="gongjiao"></div>
      <div id="buxing"></div>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '55%', width: '100%' }"
      >
        <h4 style="text-align: center; margin-top: 1rem">详情</h4>
        <div class="box13">
          <div class="box14">
            <img
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8InsvK94GQ2nhzRViLbJWAHaE8?w=278&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7"
              alt=""
            />
          </div>
          <div class="box15" style="overflow: hidden">
            <p style="font-weight: 600; font-size: 17px; margin-top: 0.5rem">
              {{ data.name }}
            </p>
            <p
              style="
                font-size: 14px;
                color: rgb(126, 126, 126);
                margin-top: 2rem;
              "
            >
              {{ data.postton }}
            </p>
            <p style="margin-top: 2rem">
              <span
                ><van-icon name="location" color="orange" />
                {{ data.gl + '公里' }}</span
              >
              <span style="margin-left: 0.8rem"
                ><van-icon name="star" color="orange" /> {{ data.pj }}</span
              >
            </p>
          </div>
        </div>
        <button @click="ssdaohang" class="btn">导航到店</button></van-popup
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
const data = ref({});
const mapApiKey = reactive({
  // securityJsCode: '88ac9a74c267fc9cd991c643f1a6c525', // 注意如果需要 2.0 mapApiKey.securityJsCode 必填
  // key: 'e97857d242d439faa32287a728be2cbe', // 申请好的Web端开发者Key，首次调用 load 时必填
  // securityJsCode: '1cd0edac0a3ac0ab84cf2550cd3b5745',
  // key: '11c63682a43854ea78e47d02efcee939',
   securityJsCode: '227532164ea7dbc2180e469f5cbd83e8',
  key: '06262f52d33628615b839c4b1b000ff3'
  // securityJsCode: 'f26bfbd1f7fa823a9aad57d7b2197931',
  // key: 'af12de379376385b694e51663fa93934',
});
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const ismaptraffic = ref(false);
const searchplace = ref('');
const nownowplace = ref('115.482337,38.814462');
const searchlnt1 = ref('');
const searchlnt = ref('');
const searchlat1 = ref('');
const searchlat = ref('');
let AMap = null;
const ss = ref('');
const route = useRoute();
const jwd = reactive({})
if(route.query.data){
  //  jwd = JSON.parse(route.query.data)
  Object.assign(jwd,{})
   Object.assign(jwd,JSON.parse(route.query.data))
   searchlnt1.value = Number(jwd.lat)
   searchlat1.value = Number(jwd.lng)
   console.log(searchlnt1.value,searchlat1.value);
   
}

// 为了安全性，需要加密钥
window._AMapSecurityConfig = {
  securityJsCode: mapApiKey.securityJsCode,
};

AMapLoader.load({
  key: mapApiKey.key, // Web端 (JSAPI) key，首次调用load必填
  version: '2.0', // JSAPI版本，默认 1.4.15
  // "plugins": ["AMap.Geolocation", "AMap.PlaceSearch"], // 要使用的插件列表
})
  .then((map) => {
    console.log("3333");
    
    AMap = map;
    console.log("11111");
    
    initMap();
    console.log("22222");
    
    searchNear();
    if (searchlat1.value != '' || searchlnt1.value != '') {
      
      console.log(jwd);
      ssdaohang();
    }
  })
  .catch((e) => {
    // 高德地图加载失败
    console.error(e);
  });
const initMap = () => {
  let map = new AMap.Map('container', {
    center: [116.857461, 39.310582], // 地图中心点坐标
    zoom: 15, // 地图缩放级别
    viewMode: '2D', // 使用3D视图'
    // pitch: 75, // 地图俯仰角度，默认0，取值范围0-83
  });

  map.on('click', function (e) {
    console.log('====================================');
    console.log(e);
    console.log('====================================');
    var position = [e.lnglat.lng, e.lnglat.lat];
    var infoWindow = new AMap.InfoWindow({
      anchor: 'top-left',
      content: '经纬度' + e.lnglat.lng + ',' + e.lnglat.lat,
    });

    infoWindow.open(map, position);
    new AMap.Marker({ position: position, map }); // 创建一个 Marker 实例
  });

  // 当前定位
  var options = {
    showButton: true, //是否显示定位按钮
    position: 'LB', //定位按钮的位置
    /* LT LB RT RB */
    offset: [10, 20], //定位按钮距离对应角落的距离
    showMarker: true, //是否显示定位点
    markerOptions: {
      //自定义定位点样式，同Marker的Options
      offset: new AMap.Pixel(-18, -36),
      content:
        '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
    },
    showCircle: true, //是否显示定位精度圈
    circleOptions: {
      //定位精度圈的样式
      strokeColor: '#0093FF',
      noSelect: true,
      strokeOpacity: 0.5,
      strokeWeight: 1,
      fillColor: '#02B0FF',
      fillOpacity: 0.25,
    },
  };
  AMap.plugin('AMap.Geolocation', function () {
    var geolocation = new AMap.Geolocation(options);
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
  });

  var autoOptions = {
    input: 'tipinput',
  };

  AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
    var auto = new AMap.AutoComplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
      city: '', // 兴趣点城市
      citylimit: true, //是否强制限制在设置的城市内搜索
      pageSize: 10, // 单页显示结果条数
      children: 0, //不展示子节点数据
      pageIndex: 1, //页码
      extensions: 'all', //返回基本地址信息
    });

    auto.on('select', select); //注册监听，当选中某条记录时会触发
    function select(e) {
      console.log(e);
      searchlnt.value = e.poi.location.lng; //维度
      searchlat.value = e.poi.location.lat; //经度
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name); //关键字查询查询

      var lnglat = new AMap.LngLat(
        Number(searchlnt.value),
        Number(searchlat.value),
      );
      console.log('====================================');
      console.log(lnglat);
      console.log('====================================');
      // console.log(lnglat)
      var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [lnglat.lat, lnglat.lng],
      });

      //详情查询
      placeSearch.getDetails(e.poi.id, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          placeSearch_CallBack(result);
        }
      });
      var infoWindow = new AMap.InfoWindow({
        autoMove: true,
        offset: { x: 0, y: -30 },
      });
      //回调函数
      function placeSearch_CallBack(data) {
        console.log(data);
        var poiArr = data.poiList.pois;
        //添加marker
        var marker = new AMap.Marker({
          map: map,
          position: poiArr[0].location,
        });
        map.setCenter(marker.getPosition());
        infoWindow.setContent(createContent(poiArr[0]));
        infoWindow.open(map, marker.getPosition());
      }
      function createContent(poi) {
        //信息窗体内容
        var s = [];
        s.push('<b>名称：' + poi.name + '</b>');
        s.push('地址：' + poi.address);
        s.push('电话：' + poi.tel);
        s.push('类型：' + poi.type);
        return s.join('<br>');
      }
    }
  });
};
const searchNear = () => {
  AMap.plugin('AMap.PlaceSearch', function () {
    let map = new AMap.Map('container', {
      center: [116.857461, 38.310582], // 地图中心点坐标
      zoom: 15, // 地图缩放级别
      viewMode: '2D', // 使用3D视图'
      // pitch: 75, // 地图俯仰角度，默认0，取值范围0-83
    });
    var placeSearch = new AMap.PlaceSearch({
      // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
      city: '保定',
    });
    if (searchplace.value == '') {
      searchplace.value = '保定莲池区理发店';
    } else {
      searchplace.value = searchplace.value;
    }
    let starticon = new AMap.Icon({
      size: new AMap.Size(40, 50), // 图标尺寸
      image:
        '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>', // Icon的图像
      imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
      // imageOffset: new AMap.Pixel(-3, -3),  // 图像相对展示区域的偏移量，适于雪碧图等
    });
    

      
        //关键字查询
    placeSearch.search(searchplace.value, function (status, result) {
      // 查询成功时，result即对应匹配的POI信息
      console.log(result);
      var pois = result.poiList.pois;
      for (let i = 0; i < pois.length; i++) {
        var poi = pois[i];
        var marker = [];
        marker[i] = new AMap.Marker({
          position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: poi.name,
          content: '<img src="/401位置.png" style="width:36px;height:36px"/>',
        });
        if (searchlat1.value == '' || searchlnt1.value == '') {
      
      map.add(marker[i]);
    }
    
        marker[i].on('click', function (e) {
          searchlnt1.value = e.lnglat.getLat();
          searchlat1.value = e.lnglat.getLng();
          console.log('marker信息：', e.target._originOpts.title);

          setTimeout(() => {
            axios
              .get('http://localhost:3000/jsb/getbarber', {
                params: {
                  name: e.target._originOpts.title,
                },
              })
              .then((res) => {
                console.log('====================================');
                console.log(res.data.list);
                console.log('====================================');
                data.value = res.data.list;
              });

            show.value = true;
          }, 100);
        });
      }
       if (searchlat1.value == '' || searchlnt1.value == '') {
      
      map.setFitView();
    }
    });
    console.log('====================================');
    console.log('aaa');
    console.log('====================================');
    var options = {
      showButton: true, //是否显示定位按钮
      position: 'LB', //定位按钮的位置
      /* LT LB RT RB */
      offset: [10, 20], //定位按钮距离对应角落的距离
      showMarker: true, //是否显示定位点
      markerOptions: {
        //自定义定位点样式，同Marker的Options
        offset: new AMap.Pixel(-18, -36),
        content:
          '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
      },

      showCircle: true, //是否显示定位精度圈
      circleOptions: {
        //定位精度圈的样式
        strokeColor: '#0093FF',
        noSelect: true,
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: '#02B0FF',
        fillOpacity: 0.25,
      },
    };
    AMap.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation(options);
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
    });
  });
};

const startdaohang = () => {
  // console.log(1111111)
  let map = new AMap.Map('container', {
    center: [116.857461, 38.310582], // 地图中心点坐标
    zoom: 15, // 地图缩放级别
    viewMode: '2D', // 使用3D视图'
    // pitch: 75, // 地图俯仰角度，默认0，取值范围0-83
  });

  AMap.plugin(['AMap.Driving', 'AMap.PlaceSearch'], function () {
    const driving = new AMap.Driving({
      map: map,
      panel: 'jiache',
    });

    var keywords = searchplace.value;
    AMap.plugin('AMap.PlaceSearch', function () {
      var autoOptions = {
        city: '',
      };
      var placeSearch = new AMap.PlaceSearch(autoOptions);
      placeSearch.search(keywords, function (status, result) {
        11;
        // 搜索成功时，result即是对应的匹配数据

        searchlnt.value = result.poiList.pois[0].location.lng;
        searchlat.value = result.poiList.pois[0].location.lat;
      });
    });

    if (searchlnt.value != '' || !searchlat.value != '') {
      const endLngLat = [searchlnt.value, searchlat.value]; //终点坐标
      const startLngLat = [
        Number(nownowplace.value.split(',')[0]),
        Number(nownowplace.value.split(',')[1]),
      ]; //起始点坐标
      // console.log(startLngLat,endLngLat)
      //   根据经纬度

      driving.search(startLngLat, endLngLat, function (status, result) {
        if (status === 'complete') {
          //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
          //查询成功时，result 即为对应的驾车导航信息
          // console.log(result);
        } else {
          console.log('获取驾车数据失败：' + result);
        }
      });
    } else {
      // 使用地名确认起终点
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          position: 'RB', //定位按钮的停靠位置
          offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          console.log(result);
        });
      });
      const points = [
        { keyword: '北京市地震局（公交站）', city: '北京' }, //起始点坐标
        { keyword: '亦庄文化园（地铁站）', city: '北京' }, //终点坐标
      ];
      // 根据地名
      driving.search(points, function (status, result) {
        if (status === 'complete') {
          //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
          //查询成功时，result 即为对应的驾车导航信息
          console.log(result);
        } else {
          console.log('获取驾车数据失败：' + result);
        }
      });
    }
  });
};

const ssdaohang = () => {
  document.getElementById('gongjiao').style = 'display:none';
  document.getElementById('buxing').style = 'display:none';
  document.getElementById('jiache').style =
    'position: fixed;\n' +
    '  background-color: white;\n' +
    '  max-height: 90%;\n' +
    '  overflow-y: auto;\n' +
    '  top: 8rem;\n' +
    '  left: 10px;\n' +
    '  width: 200px;';
  show.value = false;
  let map = new AMap.Map('container', {
    center: [116.857461, 38.310582], // 地图中心点坐标
    zoom: 15, // 地图缩放级别
    viewMode: '2D', // 使用3D视图'
    // pitch: 75, // 地图俯仰角度，默认0，取值范围0-83
  });
  AMap.plugin('AMap.Driving', function () {
    var driving = new AMap.Driving({
      map: map,
      panel: 'jiache',
    });
   
   
    if (searchlat1.value == '' || searchlnt1.value == '') {
      searchlat1.value = Number(jwd.lat);
      searchlnt1.value = Number(jwd.lng);
      console.log(searchlat1.value, searchlnt1.value);
           const endLngLat = [Number(searchlnt1.value), Number(searchlat1.value)]; //终点坐标
           console.log(endLngLat);
    const startLngLat = [
      Number(nownowplace.value.split(',')[0]),
      Number(nownowplace.value.split(',')[1]),
    ]; //起始点坐标
    driving.search(startLngLat, endLngLat, function (status, result) {
      if (status === 'complete') {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息
        // console.log(result);
      } else {
        console.log('获取驾车数据失败：' + result);
      }
    });
    } else {
      searchlat1.value = searchlat1.value;
      searchlnt1.value = searchlnt1.value;
       const endLngLat = [Number(searchlat1.value), Number(searchlnt1.value)]; //终点坐标
    const startLngLat = [
      Number(nownowplace.value.split(',')[0]),
      Number(nownowplace.value.split(',')[1]),
    ]; //起始点坐标
    driving.search(startLngLat, endLngLat, function (status, result) {
      if (status === 'complete') {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息
        // console.log(result);
      } else {
        console.log('获取驾车数据失败：' + result);
      }
    });
    }
  });
  // 使用坐标确认起终点



};
window.onload = function () {
  initMap();
};
const busdaohang = () => {
  console.log("211111111");
  
  document.getElementById('jiache').style = 'display:none';
  document.getElementById('buxing').style = 'display:none';
  document.getElementById('gongjiao').style =
    'position: fixed;\n' +
    '  background-color: white;\n' +
    '  max-height: 90%;\n' +
    '  overflow-y: auto;\n' +
    '  top: 8rem;\n' +
    '  left: 10px;\n' +
    '  width: 200px;';
  show.value = false;
  let map = new AMap.Map('container', {
    center: [116.857461, 38.310582], // 地图中心点坐标
    zoom: 15, // 地图缩放级别
    viewMode: '2D', // 使用3D视图'
    // pitch: 75, // 地图俯仰角度，默认0，取值范围0-83
  });
  AMap.plugin('AMap.Transfer', function () {
    var transferOption = {
      map: map,
      nightflag: true, // 是否计算夜班车
      city: '北京市',
      panel: 'gongjiao',
      outlineColor: '#ffeeee',
      autoFitView: true,
      policy: AMap.TransferPolicy.LEAST_TIME, // 其它policy取值请参照 https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
    };

    var transfer = new AMap.Transfer(transferOption);
  //   const endLngLat = [Number(searchlat1.value), Number(searchlnt1.value)]; //终点坐标
  //   const startLngLat = [
  //     Number(nownowplace.value.split(',')[0]),
  //     Number(nownowplace.value.split(',')[1]),
  //   ]; //起始点坐标
  //   transfer.search(startLngLat, endLngLat, function (status, result) {
  //     // result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
  //     if (status === 'complete') {
  //       console.log(result);
  //     } else {
  //       console.log('error');
  //     }
  //   });
  // });
   if (searchlat1.value == '' || searchlnt1.value == '') {
    console.log("aaaaaaaaaaaaaaaaaaaaaaaa");
    
      searchlat1.value = Number(jwd.lat);
      searchlnt1.value = Number(jwd.lng);
      console.log(searchlat1.value, searchlnt1.value);
           const endLngLat = [Number(searchlnt1.value), Number(searchlat1.value)]; //终点坐标
           console.log(endLngLat);
    const startLngLat = [
      Number(nownowplace.value.split(',')[0]),
      Number(nownowplace.value.split(',')[1]),
    ]; //起始点坐标b
    transfer.search(startLngLat, endLngLat, function (status, result) {
      if (status === 'complete') {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息
        // console.log(result);
      } else {
        console.log('获取驾车数据失败：' + result);
      }
    });
    } else {
      console.log("bbbbbbbbbbbbbbbbbb");
      
      searchlat1.value = searchlat1.value;
      searchlnt1.value = searchlnt1.value;
       const endLngLat = [Number(searchlat1.value), Number(searchlnt1.value)]; //终点坐标
    const startLngLat = [
      Number(nownowplace.value.split(',')[0]),
      Number(nownowplace.value.split(',')[1]),
    ]; //起始点坐标
    transfer.search(startLngLat, endLngLat, function (status, result) {
      if (status === 'complete') {
        //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
        //查询成功时，result 即为对应的驾车导航信息
        // console.log(result);
      } else {
        console.log('获取驾车数据失败：' + result);
      }
    });
    }
  });



};






const buxingdaohang = () => {
  document.getElementById('jiache').style = 'display:none';
  document.getElementById('gongjiao').style = 'display:none';
  document.getElementById('buxing').style =
    'position: fixed;\n' +
    '  background-color: white;\n' +
    '  max-height: 90%;\n' +
    '  overflow-y: auto;\n' +
    '  top: 8rem;\n' +
    '  left: 10px;\n' +
    '  width: 200px;';
  show.value = false;
  console.log('====================================');
  console.log();
  console.log('====================================');
  let map = new AMap.Map('container', {
    center: [116.857461, 38.310582], // 地图中心点坐标
    zoom: 15, // 地图缩放级别
    viewMode: '2D', // 使用3D视图'
    // pitch: 75, // 地图俯仰角度，默认0，取值范围0-83
  });
  AMap.plugin('AMap.Walking', function () {
    var walking = new AMap.Walking({
      map: map,
      panel: 'buxing',
    });
    //根据起终点坐标规划步行路线
    const endLngLat = [Number(searchlat1.value), Number(searchlnt1.value)]; //终点坐标
    const startLngLat = [
      Number(nownowplace.value.split(',')[0]),
      Number(nownowplace.value.split(',')[1]),
    ]; //起始点坐标
    walking.search(startLngLat, endLngLat, function (status, result) {
      // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
      if (status === 'complete') {
        // console.log(result)
      } else {
        console.log('error');
      }
    });
  });
};
// onUnmounted(()=>{
//   if(jwd != ""){
//     searchlat1.value = jwd.lng
//     searchlnt1.value = jwd.lat
//     ssdaohang()
//   }

// })
</script>





<style scoped>
#container {
  width: 100vw;
  height: 80vh;
  margin-top: 10vh;
}

.box13 {
  display: flex;
  width: 21rem;
  height: 7rem;
  margin: 2rem auto;
  justify-content: space-between;
  background-color: white;
}
.box14 {
  width: 30%;
  height: 80%;
  margin-top: 0.7rem;
  margin-left: 0.5rem;
  overflow: hidden;
}
.box13 p {
  margin-top: 0.1rem !important;
}
.box14 img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.box15 {
  width: 60%;
  height: 100%;
}
.btn {
  width: 80%;
  height: 3rem;
  margin-left: 2.4rem;
  background-color: orange;
  color: white;
  border-radius: 10px;
  border: none;
}
.int1 {
  width: 60%;
  height: 3rem;
  color: black;
  border: 1px solid rgb(212, 212, 212);
  margin-top: 0.3rem;
}
.btn2 {
  /* display: flex; */
  width: 4rem;
  height: 3rem;
  margin-left: 0.5rem;
  background-color: white;
}
.btn3 {
  /* display: flex; */
  width: 4rem;
  height: 3rem;
  background-color: white;
  margin-left: 0.5rem;
}
body {
  overflow: hidden;
}
#gongjiao,
#buxing,
#jiache {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 5rem;
  right: 10px;
  width: 200px;
}
</style>
